<template>
    <section id="container">
        <div>record--component</div>
        <!-- <div class="btnWrap">
            <a-switch 
                v-model="holdEnd" 
                :style="{marginRight: '5px'}" 
                :disabled="showSwitch"
                @change="handleSwitchChange"/>保留终点
            <a-button 
                size="small" 
                :style="{margin:'0 10px'}"
                @click="start"
            >开始</a-button>
            <a-button 
                size="small" 
                type="primary"
                @click="cancel"
            >撤销</a-button>
            <a-button 
                size="small" 
                type="danger" 
                :style="{margin:'0 10px'}"
                @click="finish"
            >结束</a-button>
        </div>
        <div class="result" v-show="status === 2">
            <a-textarea 
                :rows="4" 
                :style="{width:'400px'}"
                :value="result"
            />
        </div> -->
    </section>
</template>

<script lang="ts">
import Vue from 'vue';
import http from 'axios';
import { Component, Watch} from 'vue-property-decorator';
import { importAMap } from '../../platform/utils/map';

@Component
export default class record extends Vue {
    status: number = 0;
    holdEnd: boolean = true;
    resultData: {[index:number]:string}[] = [];
    polyLineData: AMap.LngLat[] = [];
    map: IObject = {};
    polyline: IObject = {};
    nowResultData: {[index:number]:string}[] = [];
    nowPolyLineData: AMap.LngLat[] = [];

    start () {
        this.status = 1;
        // let len = this.resultData.length;
        // if ( this.holdEnd === true && this.resultData.length > 0) {
        //     this.resultData = [this.resultData[len - 1]];
        //     this.polyLineData = [this.polyLineData[len - 1]];
        // } else {
        //     this.resultData = [];
        //     this.polyLineData = [];
        // }
    }

    handleSwitchChange(){
        let len = this.nowResultData.length;
        if (this.holdEnd === true) {
            this.resultData = [this.nowResultData[len - 1]];
            this.polyLineData = [this.nowPolyLineData[len - 1]];
        } else {
            this.resultData = [];
            this.polyLineData = [];
        }
    }

    cancel() {
        if (this.status === 1) {
            this.resultData.pop();
            this.polyLineData.pop();
            this.nowResultData.pop();
            this.nowPolyLineData.pop();
            this.drawPolyline();
        } else {
            return false;
        }
    }

    get showSwitch () {
        if (this.status === 2){
            return false
        } else {
            return true
        }
    }

    finish () {
        this.status = 2;
        this.handleSwitchChange()
    }

    drawPolyline () {
        if (this.polyline) {
            this.map.remove(this.polyline);
        }
        console.log(`drawPolyline:${this.polyLineData}`)
        this.polyline = new AMap.Polyline({
            path: this.polyLineData,
            borderWeight: 3, // 线条宽度，默认为 1
            strokeColor: 'red', // 线条颜色
            lineJoin: 'round' // 折线拐点连接处样式
        });
        this.map.add(this.polyline);
    }

    get result() {
        return this.nowResultData.join(';');
    }
    
    mounted() {
        var _this = this;
        importAMap().then(() => {
            var map = new AMap.Map('container', {
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: 15, //初始化地图层级
                center: [113.874378, 23.10591] //初始化地图中心点
            });
            map.plugin(['AMap.ToolBar', 'AMap.Scale'], function() {
                // 在图面添加工具条控件，工具条控件集成了缩放、平移、定位等功能按钮在内的组合控件
                //@ts-ignore
                map.addControl(new AMap.ToolBar());

                // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
                //@ts-ignore
                map.addControl(new AMap.Scale());
                map.on('click', e => {
                    if (_this.status !== 1) {
                        return false;
                    }
                    _this.resultData.push([e.lnglat.lng, e.lnglat.lat].join(','));
                    _this.polyLineData.push(new AMap.LngLat(e.lnglat.lng, e.lnglat.lat));
                    _this.nowResultData = _this.resultData.slice(0);
                    _this.nowPolyLineData = _this.polyLineData.slice(0);
                    _this.drawPolyline();
                });
                _this.map = map;
            });
        });

        let polyline = null;

        // http({
        //     method: 'get',
        //     url: 'data/building.json'
        // }).then(({ data }) => {
        //     console.log(data);
        //     /* let finalData = {};
        // data.forEach(vo=>{
        //   let roadNames = vo.name.split('-');
        //   if(!finalData[roadNames[0]]){
        //     finalData[roadNames[0]] = [];
        //   }
        //   let paths = vo.path.split(';');
        //   vo.startPoint = paths[0];
        //   vo.endPoint = paths.pop();
        //   finalData[roadNames[0]].push(vo);
        // }); */
        // });
    }
}
</script>

<style lang="scss" scoped>
    #container {
        height: 100%;
        margin-top: 60px;
    }
    .btnWrap {
        width: 320px;
        position: absolute;
        z-index: 3;
        right: 0;
        top: 0;
        padding: 20px;
    }
    .result {
        position: absolute;
        width: 400px;
        z-index: 3;
        right: 0;
        top: 60px;
    }
</style>

